<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>电子科技大学ACM校赛报名系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="shortcut icon" href="https://www.uestc.edu.cn/favicon.ico">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/amazeui/2.7.2/css/amazeui.min.css">
    <style>
        .data-panel {
            background-color: rgba(255, 255, 255, 0.84);
            border-radius: 30px;
            height: 30em;
            box-shadow: 0 0.7em 0.7em 0 rgba(102, 102, 102, 0.308);
            transition: all 0.3s ease;
        }

        .data-panel:hover {
            transform: scale(1.04, 1.04);
        }

        hr {
            border-color: rgb(120, 120, 120);
            margin-top: 0.3em;
            margin-bottom: 1.7em;
        }

        h3 {
            margin-bottom: 0.4em;
        }

        body {
            background-image: url(https://www.uestc.edu.cn/e3e2295e213e77ea3ff1e2b695ea8273.jpg?n=8e7z368tn51);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .loader {
            color: rgb(130, 130, 130);
        }

        input {
            display: block;
            background-color: rgba(0, 0, 0, 0) !important;
            border-color: rgb(230, 230, 230) !important;
        }
    </style>
</head>

<body>
    <div class="am-container" style="margin-top:7em;">
        <div class="am-g">
            <!-- 个人信息 -->
            <div class="am-u-lg-6 am-u-sm-12">
                <div class="am-panel data-panel am-panel-default">
                    <div class="am-panel-bd" style="padding: 2em">
                        
                        <h3><i class="am-icon-user"></i> 个人信息 </h3>
                        <hr style="margin-bottom: 1em;">

                        <div class="am-text-center loader" id="userLoader">
                            <i class="am-icon-rotate-right am-icon-spin" style="font-size: 14em;"></i>
                        </div>
                        
                        <div style="display: none;margin-top: 2.4em;" id="userContent" class="am-animation-scale-up">
                            姓名<span class="am-fr" id="userName">123</span>
                            <hr>
                            学院<span class="am-fr" id="userSchool">123</span>
                            <hr>
                            学号
                            <span class="am-fr">
                                <span id="userStuId">123</span> 
                            </span>
                            <hr>
                            T恤尺码<span class="am-fr" id="tshirt">XXXXXXXXXL</span><br>
                            <div class="am-g" style="margin-top:2em;" id="btnGroup">
                                <div class="am-btn am-btn-default am-btn-xl am-round am-u-sm-4 am-u-sm-offset-1" id="mBtn">修改信息</div>
                                <div class="am-btn am-btn-danger am-btn-xl am-round am-u-sm-4 am-u-sm-offset-2 am-u-end" id="btn-logout">退出登录</div>
                            </div>
                        </div>
                            
                        <div class="am-text-center am-animation-fade" id="userNotLogin" style="margin-top: 6em;display: none;">
                            <a class="am-btn am-btn-warning am-round am-btn-xl" style="width: 40%;" href="register.html">注册</a>
                            <hr class="am-center" style="border-color: rgb(199, 199, 199); width: 60%; margin-top: 1em; margin-bottom: 1em;">
                            <div class="am-btn am-btn-primary am-round am-btn-xl" style="width: 40%;" id="btn-login">登录</div>
                            <hr class="am-center" style="border-color: rgb(199, 199, 199); width: 60%; margin-top: 1em; margin-bottom: 1em;">
                            <a class="am-btn am-btn-danger am-round am-btn-xl" style="width: 40%;" href="forgot.html">忘记密码</a>
                        </div>

                        <div style="display: none;margin-top: 3em;" id="mContent" class="am-animation-scale-up">
                            <div class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <div class="am-u-sm-offset-1 am-u-sm-3">
                                        <label class="am-fr am-form-label" style="line-height: 100%;">姓名</label>
                                    </div>
                                    <div class="am-u-sm-7">
                                        <input type="text" placeholder="name" id="mname">
                                    </div>
                                    <div class="am-u-sm-3"> </div>
                                </div>
                                <div class="am-form-group">
                                    <div class="am-u-sm-offset-1 am-u-sm-3">
                                        <label class="am-fr am-form-label" style="line-height: 100%;">学院</label>
                                    </div>
                                    <div class="am-u-sm-7">
                                        <select data-am-selected="{btnWidth: '100%', btnStyle: 'default', maxHeight: 200, searchBox: 1}" id="mschool">
                                        </select>
                                    </div>
                                    <div class="am-u-sm-3"> </div>
                                </div>
                                <div class="am-form-group">
                                    <div class="am-u-sm-offset-1 am-u-sm-3">
                                        <label class="am-fr am-form-label" style="line-height: 100%;">T恤尺码</label>
                                    </div>
                                    <div class="am-u-sm-7">
                                        <select data-am-selected="{btnWidth: '100%', btnStyle: 'default', maxHeight: 100}" id="size">
                                        </select>
                                    </div>
                                    <div class="am-u-sm-3"> </div>
                                </div>
                            </div>
                            <div class="am-g" style="margin-top: 4em;">
                                <div class="am-u-sm-4 am-u-sm-offset-1">
                                    <div class="am-btn am-btn-default am-btn-xl am-round" style="width: 100%;" id="mcancel">
                                        取消
                                    </div>
                                </div>
                                <div class="am-u-sm-4 am-u-sm-offset-1 am-u-end">
                                    <div class="am-btn am-btn-primary am-btn-xl am-round" style="width: 100%;" id="mconfirm">
                                        确定
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 比赛信息 -->
            <div class="am-u-lg-6 am-u-sm-12">
                <div class="am-panel data-panel am-panel-default">
                    <div class="am-panel-bd" style="padding: 2em">
                        
                        <h3><i class="am-icon-bullhorn"></i> 比赛信息 </h3>
                        <hr style="margin-bottom: 1em;">

                        <div class="am-text-center loader" id="contestLoader">
                            <i class="am-icon-rotate-right am-icon-spin" style="font-size: 14em;"></i>
                        </div>
                        
                        <div style="display: none;margin-top: 2.4em;" id="contestContainer" class="am-animation-scale-up">
                            <span style="width: max-content" class="am-center" id="contestName">123</span>
                            <br>
                            报名开始时间<span class="am-fr" id="contestStartTime">123</span>
                            <hr style="margin-bottom: 0.3em;">
                            报名结束时间<span class="am-fr" id="contestEndTime">123</span><br>
                        </div>
                        
                        <div class="am-text-center am-animation-fade" id="userNotLogin" style="margin-top: -2em;display: none;">
                            <i class="am-icon-user-times" style="font-size: 14em;"></i>
                            <div class="am-g" style="margin-top:-1.5em;">
                                <div class="am-btn am-btn-default am-btn-xl am-round am-u-sm-4 am-u-sm-offset-1" id="btn-login">
                                    登录</div>
                                    <div
                                    class="am-btn am-btn-warning am-btn-xl am-round am-u-sm-4 am-u-sm-offset-2 am-u-end">
                                    注册</div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            <!-- 队伍信息 -->
            <div class="am-u-lg-6 am-u-sm-12">
                <div class="am-panel data-panel am-panel-default">
                    <div class="am-panel-bd" style="padding: 2em">
                        
                        <h3><i class="am-icon-group"></i> <span id="teamName">队伍信息</span> </h3>
                        <hr style="margin-bottom: 1em;">
                        
                        <div class="am-text-center" id="userLoader" style="display: none;">
                            <i class="am-icon-rotate-right am-icon-spin" style="font-size: 14em;"></i>
                        </div>
                        
                        <div style="display: none;margin-top: 2em;" id="teamContent" class="am-animation-scale-up">
                            队伍 id<span class="am-fr" id="teamID">11</span>
                            <hr>
                            队伍邀请码<span class="am-fr" id="teamIC">123</span>
                            <hr>
                            队伍账号<span class="am-fr" id="teamAccount">123</span>
                            <hr>
                            队伍密码<span class="am-fr" id="teamPwd">123</span>
                            <hr>
                            队伍成员数量<span class="am-fr" id="teamMemCnt">123</span>
                            <div class="am-g" style="margin-top:2em;">
                                <div class="am-u-sm-4">
                                    <div class="am-btn am-btn-default am-round" style="width: 100%;" id="mTeam">修改资料</div>
                                </div>
                                <div class="am-u-sm-4">
                                    <div class="am-btn am-btn-default am-round" style="width: 100%;" id="lTeam">成员列表</div>
                                </div>
                                <div class="am-u-sm-4">
                                    <div class="am-btn am-btn-danger am-round" style="width: 100%;" id="qTeam">退出队伍</div>
                                </div>
                            </div>
                        </div>

                        <div class="am-text-center" id="noTeam" style="display: none;">
                            <div class="am-g">
                                <div class="am-u-sm-6 ">
                                    <i class="am-icon-frown-o" style="font-size: 14em;"></i>
                                </div>
                                <div class="am-u-sm-6 ">
                                    <div class="am-btn am-btn-warning am-round am-btn-xl" style="margin-top: 4.3em;margin-bottom: 4em;" id="createBtn">创建队伍</div>
                                    <div class="am-btn am-btn-primary am-round am-btn-xl" id="joinBtn">加入队伍</div>
                                </div>
                            </div>
                        </div>
                
                        <div class="am-text-center am-animation-fade" id="userNotLoginIcon" style="margin-top: -1.3em;display: none">
                            <i class="am-icon-user-times" style="font-size: 14em;"></i>
                            <h1 style="margin-top:-1.7em">未登录</h1>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 注意事项 -->
            <div class="am-u-lg-6 am-u-sm-12">
                <div class="am-panel data-panel am-panel-default">
                    <div class="am-panel-bd" style="padding: 2em">
                        
                        <h3><i class="am-icon-info-circle"></i> 注意事项 </h3>
                        <hr style="margin-bottom: 1em;">
                        
                        <div style="margin-top: 2em;" id="contestNote">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modals -->
    <div class="am-modal am-modal-prompt" tabindex="-1" id="modal-login">
        <div class="am-modal-dialog" style="border-radius: 20px;">
            <div class="am-modal-hd">登录</div>
            <div class="am-modal-bd">
                <input type="text" class="am-modal-prompt-input" placeholder="邮箱">
                <input type="password" class="am-modal-prompt-input" placeholder="密码">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-confirm" tabindex="-1" id="modal-logout">
        <div class="am-modal-dialog" style="border-radius: 20px;">
            <div class="am-modal-hd">注销</div>
            <div class="am-modal-bd">
                确认注销？
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-prompt" tabindex="-1" id="modal-create">
        <div class="am-modal-dialog" style="border-radius: 20px;">
            <div class="am-modal-hd">创建队伍</div>
            <div class="am-modal-bd">
                <input type="text" class="am-modal-prompt-input" placeholder="队名">
                <input type="text" class="am-modal-prompt-input" placeholder="从属" value="UESTC">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-prompt" tabindex="-1" id="modal-join">
        <div class="am-modal-dialog" style="border-radius: 20px;">
            <div class="am-modal-hd">修改资料</div>
            <div class="am-modal-bd">
                <input type="text" class="am-modal-prompt-input" placeholder="队伍 id">
                <input type="text" class="am-modal-prompt-input" placeholder="邀请码">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-prompt" tabindex="-1" id="modal-modify">
        <div class="am-modal-dialog" style="border-radius: 20px;">
            <div class="am-modal-hd">修改资料</div>
            <div class="am-modal-bd">
                <input type="text" class="am-modal-prompt-input" placeholder="队名（不修改则留空）">
                <input type="text" class="am-modal-prompt-input" placeholder="从属（不修改则留空）">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-confirm" tabindex="-1" id="modal-quit">
        <div class="am-modal-dialog" style="border-radius: 20px;">
            <div class="am-modal-hd">退出队伍</div>
            <div class="am-modal-bd">
                确认退出？
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>

    <div class="am-popup" id="modal-list" style="border-radius: 20px;">
        <div class="am-popup-inner">
            <div class="am-popup-hd">
                <h4 class="am-popup-title">成员列表</h4>
                <span data-am-modal-close class="am-close">&times;</span>
            </div>
            <div class="am-popup-bd" style="background-color: white;">
                <table class="am-table">
                    <thead>
                        <th class="am-text-center">姓名</th>
                        <th class="am-text-center">学院</th>
                        <th class="am-text-center">学号</th>
                    </thead>
                    <tbody id="teamList">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.0.0/crypto-js.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="javascripts/common.js"></script>
    <script src="javascripts/app.js"></script>
    <script src="javascripts/modals.js"></script>
</body>

</html>
